import { useState } from 'react'
import React, { useCallback } from 'react'
import HotelStatistics from '../../components/HotelStatistics'
import HotelDynamic from '../../components/HotelDynamic'
import PercentageOfHotelData from '../../components/PercentageOfHotelData'
import { preDay } from '../../utils'

function Tongji({ selectedTags }) {
  const [timeDate, setTimeDate] = useState(preDay())
  const changeTimeDate = useCallback((timeIDate) => {
    setTimeDate(timeIDate)
  }, [])

  return (
    <div>
      <div
        style={{
          display: 'flex',
          alignContent: 'stretch',
        }}>
        <div
          style={{
            width: '70%',
          }}>
          <div>
            <HotelStatistics selectedTags={selectedTags} />
          </div>
          <div
            style={{
              backgroundColor: '#fff',
              marginTop: '1px',
            }}>
            <HotelDynamic
              selectedTags={selectedTags}
              changeTimeDate={changeTimeDate}
            />
          </div>
        </div>
        <div
          style={{
            display: 'flex',
            width: '30%',
            backgroundColor: '#fff',
            marginLeft: '13px',

            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <PercentageOfHotelData
            selectedTags={selectedTags}
            timeDate={timeDate}
          />
        </div>
      </div>
    </div>
  )
}

export default Tongji
